<template>
  <div class="mt--20 purchase-detail">
    <el-tabs type="border-card">
      <el-tab-pane label="配车合同信息">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12" class="h35">配车合同信息</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form
            :model="viewForm"
            class="detail-form"
            label-width="120px"
            label-suffix=":"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="合同编号">
                  <span class="detail-value">{{ viewForm.contractNum }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同门店">
                  <span class="detail-value">{{ viewForm.storeName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同分类">
                  <span class="detail-value">{{
                    viewForm.contractTypeDictValue
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商">
                  <span class="detail-value">{{ viewForm.supplierName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="合同金额">
                  <span class="detail-value">{{ viewForm.amount }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同日期">
                  <span class="detail-value">{{ viewForm.contractTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="税率">
                  <span class="detail-value">{{ viewForm.rate }}%</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建人">
                  <span class="detail-value">{{ viewForm.amount }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="创建时间">
                  <span class="detail-value">{{ viewForm.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注">
                  <span class="detail-value">{{ viewForm.remark }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row class="h35">审核信息</el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
              <el-col :span="6">
                <el-form-item label="审核状态">
                  <span class="detail-value">{{ viewForm.status }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核备注">
                  <span class="detail-value">{{ viewForm.notApproved }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="车型信息">
        <div class="detail-section">
          <el-row class="h35">配车合同信息</el-row>
          <el-divider></el-divider>
          <data-table
            :has-action="false"
            :value="tableData"
            :total-count="totalCount"
            :isShowSerialNum="true"
            :table-column-attributes="tableColumns"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </data-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseLayout from '@/views/layout/Base'
import DataTable from '@/components/DataTable'
import { getDict } from '@/utils/index'
import { getBaseList } from '@/api/pre-sale/newCarStock/carMatchingContract'

const dict = getDict(['入库状态'])

export default {
  components: { BaseLayout, DataTable },

  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tableColumns: [
        // { name: '订单号', value: 'brandName', type: 'text' },
        { name: '品牌', value: 'brandName', type: 'text' },
        { name: '车系', value: 'seriesName', type: 'text' },
        { name: '车型', value: 'modelName', type: 'text' },
        { name: '车身颜色', value: 'outColor', type: 'text' },
        { name: '内饰颜色', value: 'inColor', type: 'text' },
        { name: '车顶色', value: 'roofColor', type: 'text' },
        { name: '数量', value: 'num', type: 'text' },
        { name: '付款日期', value: 'paymentTime', type: 'text' },
        { name: '标准进价', value: 'criterionPrice', type: 'text' },
        { name: '实际进价', value: 'realityPrice', type: 'text' },
        { name: '资金来源', value: 'capitalSourceDict', type: 'text' },
        { name: '资金利息', value: 'zjlxName', type: 'text' },
      ],
      tableData: [],
      searchOptions: {},
      pageSize: 10,
      currentPage: 1,
      totalCount: 0,
      contractNum: '', // 合同编号
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.setData()
      },
    },
  },
  methods: {
    setData() {
      if (this.value) {
        this.viewForm = this.value
        this.contractNum = this.value.contractNum
        this.getTableData()
      }
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getTableData()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getTableData()
    },
    async getTableData() {
      let { data } = await getBaseList(
        this.searchOptions,
        this.pageSize,
        this.currentPage,
        this.contractNum
      )

      data.content.map((item) => {
        let zjly = []
        let d = item.capitalSourceDictId.split(',')
        getDict(['资金来源'])['资金来源'].map((it) => {
          if (d.includes(it.value.toString())) {
            zjly.push(it.text)
          }
        })
        item.capitalSourceDict = zjly.toString()
      })
      this.tableData = data.content
      this.totalCount = parseInt(data.totalRecords)
    },
  },
  created() {
    this.setData()
  },
}
</script>

<style lang="scss" scoped>
.h35 {
  line-height: 0.35rem;
}
</style>
